.img-div {
  background-image: url("cytus2.jpg");
  max-width: 950px;
  min-height: 590px;

}
@keyframes labelami
{
    from {margin-top: 20px;}
    to {margin-top: 0px;}
}
.input-text {
  z-index: 2;
  margin-top: 10px;
  margin-bottom: 40px;

}
.input-text label {
    position: absolute;
    z-index: 1;
    color: grey;
    cursor: text;
    transition: margin-top 0.2s,font-size 0.3s;
}

.input-text input{
  border: 2px;
  border-top-style: none;
  border-left-style: none;
  border-right-style: none;
  border-bottom-width: 1px;
  border-bottom-color: blue;
  padding-bottom: 2%;
  margin-top:5%;
  border-bottom-style: groove;
  min-height: 100%;
  min-width: 100%;
  font-size:25px;
}
.input-text input:focus {
  outline: none;
  border-bottom-width: 2px;
}
.label-halt {
  font-size:25px;
  margin-top: 27px;
}
.label-active{
  font-size:15px;
  margin-top: 0px;
}
@media screen and (max-width: 699px) and (min-width: 520px) {
  .center {
    position: relative;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
  .center {
    position: relative;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 1001px) {
    .center {
      position: relative;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
}
.button {
  cursor: pointer;
  color: black;
  font-size: 30px;
  width: 248.5px;
  height: 52px;
  border-width: 1px;
  border-style: groove;
  background-color: white;
  border-color: #ee6e73;
  transition: all,0.6s;
  outline: none;
  border-image:none;
}
.button:hover {
  background-color: #1da1f2;
  color: #353535;
  box-shadow: 0px 1.5px 0px #888888;
  border-radius:2px;
}
.button-sm {
  cursor: pointer;
  color: black;
  font-size: 15px;
  width: 80px;
  height: 30px;
  border-width: 1px;
  border-style: groove;
  background-color: white;
  border-color: #ee6e73;
  transition: all,0.6s;
  outline: none;
  border-image:none;
}
.button-sm:hover {
  background-color: #1da1f2;
  color: #353535;
  box-shadow: 0px 1.5px 0px #888888;
  border-radius:2px;
}
body {
  background-color: white;
}
@keyframes belonger {
  from {width:0px;}
    to {width: 240.5px;}
}
@keyframes beshort {
  from {width:240.5px;}
    to {width: 0px;}
}
.hover-float{
  animation: belonger 0.4s;
}
.float {
  position: absolute;
  z-index: 1;
  background-color: #1da1f2;
  height: 50px;
  width: 240.5px;

  animation-fill-mode: forwards;
}
.float-out {
  position: relative;
  float: right;
  z-index: 2;
  background-color: white;
  height: 50px;
  width: 240.5px;
  animation-fill-mode: forwards;
}
.hover-float-out{
  animation: beshort 0.4s;
  animation-fill-mode: forwards;
}
.bottom-float{
  border-color: #1da1f2;
  border-width: 1px;
  width: 240.5px;
  border-style: groove;
  height: 50px;
  cursor: pointer;
}
.bottom-float a{
  z-index: 3;
  position: absolute;
  color: black;
  text-decoration: none;
  width: 120px;
  margin-right: 150px;
  height: 20px;
  margin-top: 7px;
  margin-left: 65px;
  font-size: 25px;
}
.switches{
  width: 60px;
  height: 50px;
}
.switches span{
}
.switchesoff span::before{
  transition: all,0.6s;
  content: url("sharp_toggle_off_black_24dp.png");
}
.switcheson span::before{
  transition: all,0.6s;
  content: url("sharp_toggle_on_black_24dp.png");
}
.select label{
  color: #9e9e9e;
  font-size: 10px;
}
select:focus{
  background-image: url("sharp_arrow_upward_black_24dp.png");
}
select option {
  /*outline: none;*/
  -webkit-appearance:none;

}
select option:active {
  background-color: red;
}
option {

}
.cover {
    position: absolute;
    z-index: 1;
    margin-top: 40px;
    width: 300px;
    min-height: 30px;
    background-color: white;
    box-shadow: 0px 0.5px 1px #888888;
}
.close .cover{
  visibility: hidden;
}
.cover ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 .cover ul li {
   padding-top:  5px;
   padding-bottom: 5px;
   padding-left: 10px;
 }
 .cover ul li:hover {
   cursor: pointer;
   background-color: #cccccc;
   box-shadow: 0px 0.5px 1px #888888;
 }
.select-hand {
    position: absolute;
    width: 300px;
    border-bottom-style: groove;
    border-bottom-width: 1.5px;
    padding-bottom: 2px;
    cursor: pointer;
}
.select-hand .icon {
    float: right;
    width: 25px;
    height: 25px;
    background-image: url(sharp_arrow_downward_black_24dp.png);
    background-repeat: no-repeat;
    background-size: 25px,25px;
    animation-fill-mode: forwards;
}
@keyframes turnup{
  from {transform:rotateX(0deg);}
  to {transform:rotateX(180deg);}
}
@keyframes turndown{
  from {transform:rotateX(180deg);}
  to {transform:rotateX(0deg);}
}
.turnup{
  animation: turnup 0.5s;
  -webkit-animation: turnup 0.5s; /* Safari 与 Chrome */
}
.turndown{
  animation: turndown 0.5s;
  -webkit-animation: turndown 0.5s; /* Safari 与 Chrome */
}
select {

}
